<template>
  <div class="import-container">
    <el-card class="box-card">
      <el-alert
        type="warning"
        show-icon=""
        title="每次导入仅可添加1000名员工,姓名,手机,入职时间,聘用形式为必填"
      />
      <h2>员工导入</h2>
      <updataxscel :on-success="successHandler" />
    </el-card>
  </div>
</template>

<script>
// 导入上传组件
import updataxscel from '../../components/updataxscel/index.vue'
// 导入工具函数
import { formatxslxDate } from '../../utils/index'
// 导入上传接口
import { importEmployees } from '../../api/employees'
export default {
  name: 'Import',
  components: {
    updataxscel
  },
  methods: {
    async successHandler(data) {
      console.log(data)
      // 基于现有数据,生产一个新的数组
      const newArr = data.results.map(v => {
        // returu 要返回的每一项
        v.correctionTime = formatxslxDate(v.correctionTime, '/')
        v.timeOfEntry = formatxslxDate(v.timeOfEntry, '/')
        // 修改原对象
        return {
          ...v
        }
      })
      console.log('newArr:', newArr)
      // 本地导入成功
      await importEmployees(newArr)
      this.$message.success('批量导入成功')
      this.$router.push({ path: '/employees' })
    }
  }
}
</script>

<style lang="scss">
.import-container {
  .el-card__body {
    h2 {
      text-align: center;
    }
  }
}
</style>
